/**
 * @file: checkbox-item
 * @author: Lengxx
 * @date: 2024-06-20
 */
<template>
  <div :class="classnames + getClassnames()">
    <Checkbox :checked="checked" @change="onChange">
      <slot></slot>
    </Checkbox>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'
import { Checkbox } from 'ant-design-vue';
import { ICheckboxEmits, ICheckboxItemProps } from './types';

const emits = defineEmits<{
  (e: 'change', data: ICheckboxEmits): void
}>();

const props = defineProps<{
  checked: boolean
  data?: ICheckboxItemProps
}>()

const checked = ref(props.checked || false);

watch(() => props.checked, () => {
  checked.value = props.checked;
})

const classnames = ref(`border border-solid hover:border-[#0960bd] rounded-[4px] p-[4px]`)

function onChange() {
  checked.value = !checked.value;
  const emitData = { ...props.data, checked: checked.value } as ICheckboxEmits
  emits('change', emitData);
}

function getClassnames() {
  return checked.value ? ' border-[#0960bd]' : ' border-gray-200';
}

</script>
